<template>
  <div class="view-file-dialog-container">
    <el-dialog title="查看附件" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="600">
      <div class="file-list">
        <div class="file-item" v-for="item in fileList" :key="item.name">
          <div class="file-item-preview">
            <el-image style="width: 48px; height: 48px" :src="getPreviewUrl(item.name)" fit="cover" />
          </div>
          <div class="file-item-name">{{ getFileName(item.name) }}</div>
          <div class="file-item-actions">
            <el-button class="action-button" type="text" size="small" @click="onPreview(item)">预览</el-button>
            <el-button class="action-button" type="text" size="small" @click="onDownload(item)">下载</el-button>
          </div>
        </div>
      </div>
      <div v-if="!fileList || fileList.length === 0">无附件</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-image-viewer
      v-if="state.showViewer"
      :url-list="imageUrls"
      :initial-index="state.initialIndex"
      teleported
      @close="state.showViewer = false"
    />
  </div>
</template>

<script setup lang="ts" name="viewFilesDialog">
import { reactive } from 'vue';
import { File } from '/@/models';
import { ref } from 'vue';
import { getPreviewUrl } from '/@/utils/get-preview-url';
import { saveAs } from 'file-saver';
import { download } from '/@/api/file';
import { isImage } from '/@/utils/is-image';
import { computed } from 'vue';
import { last } from 'lodash/fp';

const state = reactive({
  src: '',
  showViewer: false,
  initialIndex: 0,
  dialog: {
    isShowDialog: false,
  },
});
const fileList = ref<File[]>([]);
const imageList = ref<string[]>([]);

// 打开弹窗
const openDialog = (files?: File[]) => {
  fileList.value = files || [];
  imageList.value = (files || [])
    .filter((item) => {
      return isImage(item.name);
    })
    .map((item) => {
      return item.name;
    });
  state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
  fileList.value = [];
  closeDialog();
};

const imageUrls = computed(() => {
  return imageList.value.map((name) => getPreviewUrl(name));
});

const onPreview = async (item: File) => {
  if (isImage(item.name)) {
    state.showViewer = true;
    const index = imageList.value.indexOf(item.name);
    state.initialIndex = index;
  } else {
    window.open(getPreviewUrl(item.name));
  }
};

const getFileName = (name: string) => {
  return last(name.split('/'));
};

const onDownload = (item: File) => {
  download(item.name).then((res) => {
    saveAs(res, item.origin_name);
  });
};

// 暴露变量
defineExpose({
  openDialog,
  closeDialog,
});
</script>

<style lang="scss">
.file-list {
  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 8px 0;

    .action-button {
      margin: 0 3px;
      padding: 0;
    }

    &-name {
      margin-left: 12px;
      flex: 1;
      padding-right: 8px;
      overflow: hidden;
    }
  }
}
</style>
